<template>
  <CraneForm
    ref="craneForm"
    :schema="data.schema"
    :enable-button="false"
    @form-submit="submit"
  ></CraneForm>
  <div class="login-btn">
    <el-button @click="register">注册</el-button>
    <el-button
      v-loading="data.isLoading"
      type="primary"
      @click="craneForm.submit"
    >
      登录
    </el-button>
  </div>
  <div class="forget-pwd"><span>忘记密码？</span></div>
</template>

<script setup lang="ts">
import { CraneForm, useDialog } from 'crane-element';
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { CraneSchema } from 'crane-element/lib/components/CraneForm/types';
import {
  _login,
  _register,
  _totalBaseInfo
} from '@/pages/login/login.service.ts';
import { RetVO } from '@/http/public.type.ts';
import { TokenItem } from '@/pages/login/login.types.ts';
import useLoginStore from '@/store/modules/login.store.ts';
import { ElMessage, ElNotification } from 'element-plus';
import Register from '@/pages/login/register/Register.vue';
import useBaseInfoStore from '@/store/modules/baseInfo.store.ts';

const { openDialog } = useDialog();

const craneForm = ref(CraneForm);

const minWidth = 1160;

const data = reactive({
  isLoading: false,
  schema: {
    properties: {
      phone: {
        type: 'string',
        title: '手机号'
      },
      password: {
        type: 'password',
        title: '密码'
      }
    },
    required: ['phone', 'password']
  } as CraneSchema,
  isPC: true
});

const props = defineProps({
  close: {
    type: Function,
    required: true
  }
});

onMounted(() => {
  handleResize();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

function submit(e: any) {
  data.isLoading = true;
  _login(e).then((res: RetVO<TokenItem>) => {
    if (res.code === 200) {
      useLoginStore().setToken(res.data.tokenValue);
      _totalBaseInfo().then((res: RetVO<any>) => {
        if (res.code === 200) {
          useBaseInfoStore().setTotalBaseInfo(res.data);
        }
      });
      ElNotification.success('登录成功');
      props.close();
    } else {
      ElNotification.error(res.msg);
    }
    data.isLoading = false;
  });
}

function register() {
  openDialog({
    component: Register,
    options: {
      destroyOnClose: true,
      width: data.isPC ? '50%' : '100%'
    },
    params: {}
  }).then((res: any) => {
    if (!res) {
      return;
    }
    if (res.password !== res.confirmPassword) {
      ElMessage.error('两次密码不一致');
      return;
    }
    _register(res).then((res: RetVO<any>) => {
      if (res.code === 200) {
        ElNotification.success('注册成功');
      } else {
        ElNotification.error(res.msg);
      }
    });
  });
}

function handleResize() {
  data.isPC = window.innerWidth > minWidth;
}
</script>

<style scoped lang="less">
.login-btn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
}

.forget-pwd {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  color: var(--font-color);
  margin-top: 20px;
  font-size: 12px;

  span {
    cursor: pointer;
  }
}
</style>
